Kalani Staudacher's Portfolio

Welcome to the Shepard Fairey Project

The Shepard Fairey project was a program that I made in highschool as part of my computer science curriculum. It was inspired by the art style of Shepard Fairey, who made the Obama "Hope" Poster.

The program takes an image and converts its tones to four colors. I explain how it works further down, but you might want to give it a try first.

How to Use the Program

Use the "Load a file" button to select an image from your computer. Then use the color buttons to select 4 different colors.

The sliders are ordered from darkest to lightest. So the first slider will select the color for shades within the darkest range, the second slider will select a color for the next darkest range, and so on. After selecting colors, press "Convert" to see your new image. It will take a few seconds to process the new image. After it's done, you can download your converted image using the "Download Fairey" button.

More Background on this Project

The original program was in Java, as linked here. I'm not sure how well it runs, because it's been a long time since I've used Java. However, I really liked the program and have always wanted to put it onto a website so that others could use it easily. I took this as an opportunity to practice my Javascript and translated the algorithmn with help from this web tutorial. The tutorial was on how to convert an image to grayscale using Javascript, CSS, and HTML. It helped me understand how Canvas and buttons work in Javascript. Here's my own copy of the Grayscale program that I wrote based off the tutorial.

How does it work, exactly?

First, the program converts your selected image to grayscale. It does this by cycling through the pixel's color values using Canvas and then averaging the rgb color values. From there, it creates an image in the style of Shepard Fairey by modifying the pixels in your orginal image using the colors you selected. It cycles through the grayscale pixels and modifies their color depending on their grayscale value.

Examples

Have fun playing with my program! It takes some time to figure out what colors look best. I've put some examples of photos I've converted below so you get an idea of some results.